<template>
  <div class="main" id="question-bank-list">
    <div class="operate-panel">
      <a-button icon="reload">刷新</a-button>
      <a-button type="primary" icon="plus" style="margin: 0 0.5rem">新建</a-button>
      <a-input-search style="width: 272px" />
    </div>
    <div class="content">
      <a-table
        :dataSource="bankData"
        :columns="columns"
        :rowSelection="rowSelection"
        :rowKey="getTableRowKey"
        :loading="loading"
      >
        <span slot="creatorTitle"><a-icon type="smile-o" /> 创建人</span>
        <span slot="questionIds" slot-scope="questionIds">{{ questionIds.length }}</span>
        <span slot="action" slot-scope="text, record">
          <a href="#" @click="handleQuestionBankEdit(record)">配置</a>
          &nbsp;
          <a href="#" @click="handleQuestionBankDelete(record)">删除</a>
        </span>
      </a-table>
    </div>
    <question-bank-edit-drawer :visible="drawerVisible" :bankId="currentEditRowIndex" :onClose="handleDrawerClose" />
  </div>
</template>

<script>
import { QUESTION_BANK_MUTATION } from '../../store/mutation-types'
import QuestionBankEditDrawer from './modules/QuestionBankEditDrawer.vue'
import { sleep } from '../../utils/util'

export default {
  components: { QuestionBankEditDrawer },
  name: 'QuestionBankList',
  data: function () {
    return {
      bankData: [],
      selectedRowKeys: [],
      loading: false,
      currentEditRowIndex: -1,
    }
  },
  computed: {
    columns: function () {
      return [
        {
          dataIndex: 'name',
          key: 'name',
          title: '题库',
        },
        {
          dataIndex: 'creatorName',
          key: 'creatorName',
          slots: { title: 'creatorTitle' },
        },
        {
          dataIndex: 'questionIds',
          key: 'questionIds',
          title: '题目数',
          scopedSlots: { customRender: 'questionIds' },
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ]
    },
    rowSelection: function () {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange,
        hideDefaultSelections: true,
      }
    },
    drawerVisible: function () {
      return this.currentEditRowIndex !== -1
    },
  },
  methods: {
    handleDrawerClose: function () {
      this.currentEditRowIndex = -1
    },
    onSelectChange: function (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    queryBankFromStore: function () {
      const { questionBank } = this.$store.state
      this.bankData = questionBank.banks
    },
    getTableRowKey: function (record) {
      return record.id
    },
    handleQuestionBankEdit: function (row) {
      this.currentEditRowIndex = row.id
    },
    handleQuestionBankDelete: function (row) {
      this.$store.commit(QUESTION_BANK_MUTATION.DELETE_BANK, { bankId: row.id })
      sleep(
        500,
        () => {
          this.loading = true
        },
        () => {
          this.queryBankFromStore()
          this.loading = false
        }
      )
      this.$notification.success({
        message: '操作成功',
        description: '题库已删除',
      })
    },
  },
  created() {
    this.queryBankFromStore()
  },
}
</script>

<style scoped>
.main {
  background-color: white;
}

.main > .operate-panel {
  padding: 0 2rem;
  height: 65px;
  width: 100%;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}

.main > .content {
  padding: 2rem;
}
</style>
